<template>
	<view class="yijianfankui">
		<view class="title">
			<u-icon name="arrow-left" size="24" @click="back"></u-icon>
			<text style="margin-left: 24rpx;">意见反馈</text>
		</view>

		<view class="contentbox">
			<view class="contenttitle">
				反馈内容
			</view>
			<view class="contenttext">
				<u--textarea v-model="value1" placeholder="请输入内容" height="100"
					:placeholder-class="input-placeholder"></u--textarea>
			</view>
			<view class="contenttitle" style="margin-top: 30rpx;">
				上传图片
			</view>
			<view class="handleimgbox">
				<view class="imgsbox" v-for="(item,index) in imgs">
					<view class="delIcon">
						<u-icon name="close-circle" color="#ffffff" size="28" @click="haneldelImg(index)"></u-icon>
					</view>
					<image class="imgsOne LoadImg" :src="item"></image>
				</view>
				<image class="handleimg" src="http://sssx.nanjingyunpeng.cn/uploads/tupian/image/uplodimg.png"
					@click="upload"></image>
			</view>
		</view>
		<view class="submit" @click="$u.debounce(submit, 500)">
			确认提交
		</view>
	</view>
</template>

<script>
	import {
		feedback
	} from "@/api/api.js"
	export default {
		data() {
			return {
				value1: "",
				imgs: [],
				ids: "",
				inputPlaceholder: {
					'backgroundColor': 'red !important',
				}
			}
		},
		methods: {
			upload() {

				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						// console.log("tempFilePaths",tempFilePaths)
						for (let i = 0; i < tempFilePaths.length; i++) {
							uni.uploadFile({
								url: 'https://sssx.nanjingyunpeng.cn/index.php/system/Basic/postUploadOne', //仅为示例，非真实的接口地址
								filePath: tempFilePaths[i],
								name: 'img',
								formData: {
									'user': 'test'
								},
								success: (uploadFileRes) => {
									console.log("图片路径", uploadFileRes.data);
									this.imgs.push(JSON.parse(uploadFileRes.data).path)
									this.ids += JSON.parse(uploadFileRes.data).id + ","
									console.log(this.imgs)
									if (this.imgs.length == 9) {
										this.isFlag = false
										uni.showToast({
											title: '最多可上传9张图片！',
											duration: 4000,
											icon: "none",
										});
									}
								}
							});
						}
					}
				});


			},

			haneldelImg(index) {
				console.log("index",index)
				// return 
				let that = this
				that.imgs.splice(index, 1)
				that.ids = that.ids.split(',')
				that.ids.splice(index, 1)
				that.ids = that.ids.join()

			},
			async submit() {
				if (this.value1 == "") {
					uni.showToast({
						title: '请输入反馈内容！',
						icon: 'none',
						duration: 1000
					})
					return
				}

				console.log("333333333333")

				console.log("图片字符串", this.ids)
				let data = {
					content: this.value1,
					pic: this.ids
				}
				console.log("反馈数据", data)
				// return
				let res = await feedback(data)
				console.log("意见反馈", res)
				if (res.code == 1) {
					this.value1 = ""
					this.imgs = []
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 1000
					})
				}
			},
			back() {
				uni.navigateBack({
					delta: 1
				});

			}
		}
	}
</script>

<style scoped lang="scss">
	.yijianfankui {
		min-height: 100%;

		.title {
			width: 100%;
			height: 176rpx;
			padding-top: 110rpx;
			box-sizing: border-box;
			// background-color: red;
			display: flex;
			align-items: center;
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
			line-height: 38rpx;
			padding-left: 34rpx;
			box-sizing: border-box;

		}

		.contentbox {
			width: 690rpx;
			height: 360rpx;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			padding: 30rpx;


			.contenttitle {
				font-size: 30rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #333333;
				line-height: 35rpx;
			}

			.contenttext {
				margin-top: 30rpx;
				background: #F7F8FA;
			}

			.handleimgbox {
				margin-top: 30rpx;

				.imgsbox {
					display: inline-block;
					margin: 7rpx;
					position: relative;

					.delIcon {
						position: absolute;
						right: 0rpx;
					}
				}

				.imgsOne {
					width: 216rpx;
					height: 216rpx;
					display: inline-block;
				}

				.handleimg {
					width: 216rpx;
					height: 216rpx;
					display: inline-block;
				}
			}
		}

		.submit {
			width: 622rpx;
			height: 88rpx;
			background: #4A9CFF;
			border-radius: 200rpx 200rpx 200rpx 200rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
			position: fixed;
			bottom: 60px;
			left: 64rpx;
		}
	}
</style>